// 重写饿了么样式
//-------------- 树形控件
.el-tree {
  background-color: var(--tree-bg-color) !important;
  color: var(--tree-color);
  user-select: none;

  .el-tree-node {
    &:focus {
      & > .el-tree-node__content {
        background: var(--tree-node-hover-bg-color);
      }
    }

    & > .el-tree-node__children {
      overflow: unset;
    }
  }
  .el-tree-node__content {
    height: 36px;

    &:hover {
      background: var(--tree-node-hover-bg-color);
    }
  }
  .el-checkbox {
    .el-tree-node__content {
      &:hover {
        background: var(--tree-node-hover-bg-color);
      }
      &:focus {
        -webkit-animation: boom 0.2s ease-in;
        animation: boom 0.2s ease-in;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
      }
    }

    .el-checkbox__input {
      &:focus {
        -webkit-animation: boom 0.2s ease-in;
        animation: boom 0.2s ease-in;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
      }
      .el-checkbox__inner {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        border-color: var(--tree-checkbox-border-color);
        background-color: var(--tree-checkbox-bg-color);

        &::after {
          content: "\e670";
          font-family: "iconfont" !important;
          font-size: 14px;
          position: absolute;
          left: 2px;
          top: 2px;
          border-width: 0;
          transform: scaleY(0);
          width: unset;
          height: unset;
        }
      }

      &.is-focus {
        .el-checkbox__inner {
          border-color: var(--tree-checkbox-border-color);
        }
      }

      &.is-checked {
        .el-checkbox__inner {
          background-color: var(--tree-checkbox-check-bg-color);
          border-color: var(--tree-checkbox-check-border-color);
          color: var(--tree-check-icon-color);
          &::after {
            transform: scaleY(1);
          }
        }
      }

      &.is-disabled {
        .el-checkbox__inner {
          background-color: var(--tree-node-disabled-bg-color);
          border-color: var(--tree-node-disabled-border-color);
        }

        &.is-checked {
          .el-checkbox__inner {
            background-color: var(--tree-node-disabled-bg-color);
            border-color: var(--tree-node-disabled-border-color);
            color: var(--tree-node-disabled-icon-color);
          }
        }
      }

      &.is-indeterminate {
        .el-checkbox__inner {
          background-color: var(--tree-checkbox-check-bg-color);
          border-color: var(--tree-checkbox-check-border-color);

          &::before {
            content: "";
            position: absolute;
            transform: none;
            height: 2px;
            top: 8px;
            right: 4px;
            left: 4px;
            background-color: var(--tree-check-icon-color);
          }
        }
      }
    }
  }

  .custom-tree-node {
    position: relative;
    flex: 1;
    text-align: left;
    line-height: 36px;
    height: 36px;
    background-color: transparent;
    border: 0;
    color: var(--tree-color);
    font-size: 14px;
    outline: none;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
  }

  .el-tree-node__expand-icon {
    font-size: 16px;
    color: var(--tree-expand-icon-color);
  }

  .el-tree-node__label {
    font-size: 14px;
    color: var(--tree-color);
  }
}

//------------- 单选框
@keyframes boom {
  0% {
    opacity: 0.26;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  90% {
    opacity: 0.01;
    -webkit-transform: scale(3);
    transform: scale(3);
  }
  100% {
    opacity: 0;
    -webkit-transform: none;
    transform: none;
  }
}

.el-radio {
  .el-radio__input {
    width: 20px;
    height: 20px;

    .el-radio__inner {
      width: 100%;
      height: 100%;
      border-color: var(--radio-border-color);

      &::after {
        content: "";
        width: 10px;
        height: 10px;
        background: var(--radio-icon-color);
      }
    }

    &::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      background: var(--radio-color);
    }

    &.is-checked {
      .el-radio__inner {
        background: var(--radio-bg-color);
      }

      & + .el-radio__label {
        color: var(--radio-color);
      }
    }

    &.is-disabled {
      .el-radio__inner {
        background-color: var(--radio-disabled-bg-color);
        border-color: var(--radio-disabled-border-color);
      }

      &.is-checked {
        .el-radio__inner {
          background-color: var(--radio-disabled-bg-color);
          border-color: var(--radio-disabled-border-color);

          &::after {
            background-color: var(--radio-disabled-icon-color);
          }
        }
      }
      & + .el-radio__label {
        color: var(--radio-disabled-color);
      }
    }
  }

  &.is-focus {
    .el-radio__input {
      position: relative;

      &::before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;

        -webkit-animation: boom 0.3s;
        animation: boom 0.3s;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
      }
    }
  }
}

//------------ 复选框
.el-checkbox {
  .el-checkbox__original {
    position: absolute;
  }
  .el-checkbox__input {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      background: var(--checkbox-color);
    }

    .el-checkbox__inner {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background-color: var(--checkbox-bg-color);
      border-color: var(--checkbox-border-color);
      color: transparent;

      &::after {
        content: "\e670";
        font-family: "iconfont" !important;
        position: absolute;
        font-size: 22px;
        top: 0;
        left: 0;
        height: unset;
        width: unset;
        border: 0;
        transform: scaleY(0);
      }
    }

    &.is-checked {
      .el-checkbox__inner {
        position: relative;
        background-color: var(--checkbox-check-bg-color);
        border-color: var(--checkbox-check-border-color);
        color: var(--checkbox-icon-color);

        &::after {
          transform: scaleY(1);
        }
      }
      & + .el-checkbox__label {
        color: var(--checkbox-color);
      }
    }

    &.is-focus {
      .el-checkbox__inner {
        border-color: var(--checkbox-border-color);
      }
      &.el-checkbox__input {
        position: relative;

        &::before {
          content: "";
          position: absolute;
          z-index: 0;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;

          -webkit-animation: boom 0.3s;
          animation: boom 0.3s;
          -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
        }
      }
    }

    &.is-disabled {
      .el-checkbox__inner {
        border-color: var(--checkbox-disabled-border-color);
        background-color: var(--checkbox-disabled-bg-color);
      }
      & + .el-checkbox__label {
        color: var(--checkbox-disabled-color);
      }
      &.is-checked {
        .el-checkbox__inner {
          border-color: var(--checkbox-disabled-border-color);
          background-color: var(--checkbox-disabled-bg-color);
          color: var(--checkbox-disabled-border-color);
        }
      }
    }
  }
}

//原生复选框
input[type="checkbox"] {
  margin: 0;
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--checkbox-border-color);
  background-color: var(--checkbox-bg-color);
  color: var(--checkbox-icon-color);
  appearance: none;
  outline: none;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: var(--checkbox-color);
  }

  &::after {
    content: "\e670";
    font-family: "iconfont" !important;
    position: absolute;
    font-size: 22px;
    top: 0;
    left: 0;
    transform: scaleY(0);
    transition: transform 0.15s ease-in 50ms;
    transform-origin: center;
  }

  &:checked {
    background-color: var(--checkbox-check-bg-color);
    border: 1px solid var(--checkbox-check-border-color);
    color: var(--checkbox-icon-color);

    &::after {
      transform: scaleY(1);
    }
  }

  &:disabled {
    background-color: var(--checkbox-disabled-bg-color);
    border-color: var(--checkbox-disabled-border-color) !important;
    color: var(--checkbox-disabled-color) !important;
    cursor: not-allowed;

    &:checked {
      color: var(--checkbox-disabled-icon-color) !important;
    }

    & + label {
      color: var(--checkbox-disabled-color);

      &::before {
        content: "";
        cursor: not-allowed;
      }
    }
  }

  &:focus {
    &::before {
      content: "";
      position: absolute;
      z-index: 0;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      -webkit-animation: boom 0.3s;
      animation: boom 0.3s;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
    }
  }

  & + label {
    position: relative;
    margin-left: 10px;
    margin-right: 15px;
    font-size: 14px;
    color: var(--checkbox-color);
    vertical-align: super;
    user-select: none;

    &::before {
      content: "";
      position: absolute;
      width: 26px;
      height: 26px;
      top: -6px;
      left: -35px;
      z-index: 2;
    }
  }
}

//-------------- 文字提示
.el-popper {
  background-color: var(--popper-bg-color) !important;
  padding: 15px !important;
  font-size: 14px !important;
  color: var(--popper-color) !important;

  .el-popper__arrow {
    transform: translate(20px, 0) !important;

    &::before {
      content: "";
      width: 0;
      height: 0;
      top: -7px;
      border: 6px solid transparent;
      border-bottom-color: var(--popper-bg-color);
      background-color: transparent !important;
      transform: none;
    }
  }
}

//-------------- 标记
.el-badge {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    right: 4px;
    top: -1px;
    z-index: 1;
    width: 6px;
    height: 6px;
    border-radius: 4px;
    background-color: var(--el-badge-dot-color);
  }

  .el-badge__content--danger {
    background-color: var(--el-badge-bg-color);
    border-color: transparent;
    color: var(--el-badge-color);
    font-size: 12px;
  }
}

//------------------ 输入框
.cms-input {
  //原生
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid var(--input-border-color);
  color: var(--input-color);
  background-color: var(--input-bg-color);
  outline: none;

  &::placeholder {
    color: var(--input-placeholder-color);
  }

  &:hover {
    border-color: var(--input-hover-border-color);
    color: var(--input-hover-color);
    background-color: var(--input-hover-bg-color);
  }
  &:focus {
    border-color: var(--input-active-border-color);
    color: var(--input-active-color);
    background-color: var(--input-active-bg-color);
  }

  &:disabled {
    border-color: var(--input-disabled-border-color);
    color: var(--input-disabled-color);
    background-color: var(--input-disabled-bg-color);
  }
}
.el-input {
  //饿了吗
  .el-input__inner {
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid var(--input-border-color);
    color: var(--input-color);
    background-color: var(--input-bg-color);
    outline: none;

    &::placeholder {
      color: var(--input-placeholder-color);
    }

    &:hover {
      border-color: var(--input-hover-border-color);
      color: var(--input-hover-color);
      background-color: var(--input-hover-bg-color);
    }
    &:focus {
      border-color: var(--input-active-border-color);
      color: var(--input-active-color);
      background-color: var(--input-active-bg-color);
    }
  }

  &.is-disabled {
    .el-input__inner {
      border-color: var(--input-disabled-border-color) !important;
      color: var(--input-disabled-color) !important;
      background-color: var(--input-disabled-bg-color) !important;
    }
  }
}

//选择器
.el-select {
  .el-select__caret {
    position: relative;

    &::before {
      content: "\e689";
      font-family: "iconfont" !important;
      font-style: normal;
      color: var(--input-icon);
    }

    svg {
      width: 0;
      height: 0;
    }
  }

  &:hover {
    .el-select__caret {
      &::before {
        content: "\e689";
        color: var(--input-hover-icon);
      }
    }
    .el-input {
      &.is-disabled {
        .el-select__caret {
          &::before {
            content: "\e689";
            color: var(--input-disabled-icon);
          }
        }
      }
    }
  }

  &:focus {
    .el-select__caret {
      &::before {
        content: "\e689";
        color: var(--input-active-icon);
      }
    }
  }
  .el-input {
    &.is-disabled {
      .el-select__caret {
        &::before {
          content: "\e689";
          color: var(--input-disabled-icon);
        }
      }
    }
    &.is-focus {
      .el-select__caret {
        &::before {
          content: "\e689";
          color: var(--input-active-icon);
        }
      }
    }
  }
}
.el-select__popper.el-popper[role="tooltip"] {
  padding: 0 !important;
  background-color: var(--select-menu-bg-color) !important;
  box-shadow: 0px 0px 13px 0px var(--select-menu-boxshadow-color) !important;
  border: 1px solid var(--select-menu-border-color) !important;

  .el-select-dropdown__item {
    padding: 0 11px;
    height: 36px;
    line-height: 36px;
    color: var(--select-menu-item-color);

    &:hover {
      color: var(--select-menu-item-hover-color);
      background-color: var(--select-menu-item-hover-bg-color);
    }

    &.selected {
      font-weight: normal;
      color: var(--select-menu-item-active-color);
      background-color: var(--select-menu-item-active-bg-color);
    }
  }
  .el-scrollbar__bar.is-vertical {
    right: 5px;
  }
  .el-scrollbar__bar.is-horizontal {
    bottom: 5px;
  }
  .el-scrollbar__thumb {
    background-color: var(--scrollbar-thumb-bg-color);
    opacity: 1;

    &:hover {
      background-color: var(--scrollbar-thumb-hover-bg-color);
      opacity: 1;
    }
    &:focus {
      background-color: var(--scrollbar-thumb-active-bg-color);
      opacity: 1;
    }
  }
}

//开关
.el-switch {
  user-select: none;

  &::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--switch-inactive-color);
  }

  &.is-checked {
    &::before {
      content: "";
      position: absolute;
      z-index: 0;
      top: 0;
      right: 6px;
      width: 20px;
      height: 20px;
      background: var(--switch-active-color);

      -webkit-animation: boom 0.3s;
      animation: boom 0.3s;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
    }
  }

  .el-switch__input {
    height: 30px;
  }
  .el-switch__core {
    height: 30px;
    border-radius: 15px;
    background-color: var(--switch-inactive-bg-color);
    border: 2px solid var(--switch-inactive-border-color);

    .el-switch__action {
      width: 20px;
      height: 20px;
      top: 3px;
      left: 4px;
      background-color: var(--switch-inactive-icon-color);
    }
    .el-switch__inner {
      top: 6px;
    }
  }
  &.is-checked {
    .el-switch__core {
      background-color: var(--switch-active-bg-color) !important;
      border-color: var(--switch-active-border-color) !important;

      .el-switch__action {
        background-color: var(--switch-active-icon-color);
        left: 90% !important;
      }
    }
  }
  .el-switch__label--left {
    display: none;
    height: 30px;
    top: -5px;
    line-height: 30px;
    &.is-active {
      display: block;
      position: absolute;
      left: 60%;
      z-index: 1;
      color: var(--switch-inactive-color);
    }
  }
  .el-switch__label--right {
    display: none;
    height: 30px;
    top: -5px;
    line-height: 30px;
    &.is-active {
      display: block;
      position: absolute;
      right: 35%;
      z-index: 1;
      color: var(--switch-active-color);
    }
  }
}

//列表
.el-table {
  border: 1px solid var(--table-border-color) !important;
  border-radius: 4px;

  &::before {
    content: none !important;
  }

  .el-table__header {
    background-color: var(--table-head-bg-color);
    tr {
      th {
        height: 48px;
        padding: 0;
        background-color: var(--table-head-bg-color);
        border-left: 1px solid var(--table-head-border-color);
        color: var(--table-head-color);
        font-size: 16px;
        font-weight: normal;
        border-bottom: 0 !important;

        &.el-table-column--selection {
          width: 66px !important;
          text-align: center !important;
        }

        .cell {
          padding: 0 10px;
          text-align: left !important;
        }

        &:first-child {
          border-left: 0;

          .cell {
            padding: 0 20px;
          }
        }

        .caret-wrapper {
          float: right;
          height: 24px;
          background: var(--table-sort-bg-color);
          border-radius: 4px;

          .ascending {
            top: 0;
            border-bottom-color: var(--table-sort-icon-color);
          }
          .descending {
            bottom: 0;
            border-top-color: var(--table-sort-icon-color);
          }
        }

        &.ascending {
          .caret-wrapper {
            .ascending {
              border-bottom-color: var(--table-sort-active-border-color);
            }
          }
        }
        &.descending {
          .caret-wrapper {
            .descending {
              border-top-color: var(--table-sort-active-border-color);
            }
          }
        }
      }
    }
  }
  .el-table__body-wrapper {
    tr {
      td {
        height: 56px;
        padding: 0;
        background-color: var(--table-tr-bg-color);
        color: var(--table-color);
        font-size: 14px;
        border-bottom: 1px solid var(--table-tr-border-color);

        &.el-table-column--selection {
          width: 66px !important;
          text-align: center;
        }

        .cell {
          padding: 0 10px;
        }

        &:first-child {
          border-left: 0;

          .cell {
            padding: 0 20px;
          }
        }

        .cms-input {
          width: 100%;
          background: transparent;
          border-color: transparent;

          &.unreasonable {
            border-color: var(--input-unreasonable-border-color);
          }

          &:focus {
            border-color: var(--input-active-border-color);
          }
        }
        .el-input {
          .el-input__inner {
            width: 100%;
            background: transparent;
            border-color: transparent;

            &:focus {
              border-color: var(--input-active-border-color);
            }
          }
          &.unreasonable {
            .el-input__inner {
              border-color: var(--input-unreasonable-border-color);
            }
          }
        }
        .el-select {
          .el-input__inner {
            border-color: var(--input-border-color);
          }
        }
      }

      &:hover {
        td {
          background-color: var(--table-tr-hover-bg-color) !important;

          .cms-input {
            background: var(--input-hover-bg-color);
            border-color: var(--input-border-color);

            &.unreasonable {
              border-color: var(--input-unreasonable-border-color);
            }

            &:focus {
              border-color: var(--input-active-border-color);
            }
          }
          .el-input {
            .el-input__inner {
              background: var(--input-hover-bg-color);
              border-color: var(--input-border-color);

              &:focus {
                border-color: var(--input-active-border-color);
              }
            }
            &.unreasonable {
              .el-input__inner {
                border-color: var(--input-unreasonable-border-color);
              }
            }
          }
        }
      }

      &.current-row {
        td {
          background-color: var(--table-tr-active-bg-color) !important;
        }
      }

      &:last-child {
        td {
          border-bottom: 0;
        }
      }
    }
  }

  .el-table-column--selection {
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: var(--tree-checkbox-bg-color);
      border-color: var(--tree-checkbox-border-color);
    }
  }
}

// 弹窗
.dialog {
  //弹窗按钮

  //弹窗列表
  .el-table {
    .el-table__header {
      tr {
        th {
          height: 46px;
          font-size: 14px;
        }
      }
    }
    .el-table__body-wrapper {
      tr {
        td {
          height: 46px;
        }
      }
    }
  }
}

//消息提示
.el-message {
  max-width: 640px;
  padding: 15px 20px;
  background-color: var(--message-bg-color) !important;
  align-items: unset !important;

  .el-message__content {
    line-height: 20px;
    color: var(--message-color) !important;
  }

  .el-message__icon {
    font-size: 24px;
    margin-top: -3px;
    svg {
      display: none;
    }
  }

  &.el-message--success {
    border-top: 8px solid var(--message-success-bg-color);

    .el-message__icon {
      color: var(--message-success-bg-color);
      &::before {
        content: "\e6ce";
        font-family: "iconfont" !important;
        font-style: normal;
      }
    }
  }

  &.el-message--warning {
    border-top: 8px solid var(--message-warning-bg-color);

    .el-message__icon {
      color: var(--message-warning-bg-color);
      &::before {
        content: "\e6cd";
        font-family: "iconfont" !important;
        font-style: normal;
      }
    }
  }

  &.el-message--error {
    border-top: 8px solid var(--message-error-bg-color);

    .el-message__icon {
      color: var(--message-error-bg-color);
      &::before {
        content: "\e6cf";
        font-family: "iconfont" !important;
        font-style: normal;
      }
    }
  }
}
